<script setup>
import banner1 from '@/components/banner/banner1.vue'
import banner2 from '@/components/banner/banner2.vue'
import banner3 from '@/components/banner/banner3.vue'

import list1 from '@/components/lists/list1.vue'
import list2 from '@/components/lists/list2.vue'

import DragProgress from '../components/DragProgress.vue'
</script>
<template>
  <div class="pages-main">
    <div class="pages">
      <!-- <div class="page">
        <banner1 />
      </div>
      <div class="page">
        <banner2 />
      </div>
      <div class="page">
        <banner3 />
      </div>
      <div class="page">
        <list1 />
      </div> -->
      <list2 />
      <div class="page">
        <list1 />
      </div>
      <DragProgress></DragProgress>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pages-main {
  padding: 16px;

  .pages {
    display: flex;
    flex-wrap: wrap;

    .page {
      display: flex;
      width: 30%;
      height: 300px;
      margin: 10px;
      border: 1px solid #ccc;

      @media (max-width: 820px) {
        width: 50%;
      }
    }
  }

  .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
  }
}
</style>
